<template>
	<div>
		<Card class="content-card">
			<Tabs :animated="false">
				<TabPane label="新车详情" name="newCar">
					<Form ref="formValidate" :label-width="100">
						<FormItem label="车辆图片:">
							<div class="serve-img-box info-item">
								<img :src="carOutputInfo.carPhoto" alt="">
							</div>
						</FormItem>
						<FormItem label="车辆名称:">
							{{carOutputInfo.carName}}
						</FormItem>
						<FormItem label="车辆类型:">
							{{carOutputInfo.typeName}}
						</FormItem>
						<FormItem label="品牌:">
							{{carOutputInfo.brandName}}
						</FormItem>
						<FormItem label="主机厂:">
							{{carOutputInfo.factoryName}}
						</FormItem>
						<FormItem label="机型:">
							{{carOutputInfo.models}}
						</FormItem>
						<FormItem label="配置:">
							{{carOutputInfo.configuration}}
						</FormItem>
						<FormItem label="地址:">
							{{carOutputInfo.region}}{{carOutputInfo.address}}
						</FormItem>
						<FormItem label="备注">
							{{carOutputInfo.note}}
						</FormItem>
						<FormItem label="发布日期">
							{{carOutputInfo.createTime | timeForm}}
						</FormItem>
						
					</Form>
				</TabPane>
			</Tabs>
		</Card>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				releaserId: '',
				carOutputInfo: {}
			}
		},
		created() {
			this.releaserId = this.$route.params.id
			this.getData()
		},
		methods: {
			getData() {
				this.$http.post('/car/release/queryId', {
					id: this.releaserId
				}).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							this.carOutputInfo = res.data.data;
						}

					}
				})
			}

		}
	}
</script>

<style scoped>
	.info-box {
		display: flex;
		margin-bottom: 10px;
	}

	.info-box:nth-of-type(3) {
		margin-bottom: 0;
	}

	.info-item {
		flex: 1;
	}

	.serve-img-box img {
		width: 80px;
		height: 60px;
	}

	.serve-name {
		display: flex;
		justify-content: space-between;
	}
</style>
